<!-- https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data#%E5%9C%A8%E6%9C%8D%E5%8A%A1%E7%AB%AF%E8%BF%90%E8%A1%8C%E7%A4%BA%E4%BE%8B -->
<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Can Store</title>
  <link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Raleway" rel="stylesheet">
  <link href="can-style.css" rel="stylesheet">

</head>

<body>
  <header>
    <h1>The Can Store</h1>
  </header>
  <div>
    <aside>
      <form>
        <div>
          <label for="category">Choose a category:</label>
          <select id="category">
            <option selected>All</option>
            <option>Vegetables</option>
            <option>Meat</option>
            <option>Soup</option>
          </select>
        </div>
        <div>
          <label for="searchTerm">Enter search term:</label>
          <input type="text" id="searchTerm" placeholder="e.g. beans">
        </div>
        <div>
          <button>Filter results</button>
        </div>
      </form>
    </aside>
    <main>

    </main>
  </div>
  <footer>
    <p>All icons found at the Noun Project:</p>

    <ul>
      <li>Bean can icon by <a href="https://thenounproject.com/yalanis/">Yazmin Alanis</a></li>
      <li>Vegetable icon by <a href="https://thenounproject.com/skatakila/">Ricardo Moreira</a></li>
      <li>Soup icon by <a href="https://thenounproject.com/ArtZ91/">Arthur Shlain</a></li>
      <li>Meat Chunk icon by <a href="https://thenounproject.com/smashicons/">Oliviu Stoian</a>.</li>
    </ul>
  </footer>
  <script src="can-script.js"></script>
</body>

</html>